/* 此页面社区、科普、识别记录公用 */
<template>
  <NavBar
    :leftArrow="true"
    :title="title"
    @onClickLeft="goBack" />

  <div
    class="empty"
    v-if="listData.length === 0">
    空空如也~
  </div>
  <div class="community">
    <InfoCard
      v-for="item in listData"
      :key="item.id"
      :itemInfo="item"
      :isPopular="isPopular"
      @toDetail="toDetail(item.id)"
      @likeItem="likeItem(item.id)"
      @toDelete="toDelete(item.id)" />
  </div>

  <!-- 悬浮按钮 -->
  <uni-fab
    ref="fab"
    v-if="isShowAdd"
    :pattern="pattern"
    :content="content"
    horizontal="right"
    @trigger="trigger"
    @fabClick="fabClick" />
</template>

<script>
import InfoCard from "../../components/InfoCard/InfoCard.vue";
import NavBar from "../../components/NavBar/NavBar.vue";
import { getAllPosts, likePost, deletePost } from "../../api/post.js";
import {
  getKnowledgePlants,
  deleteKnowledgePlant,
  getRecognizeRecordsByUserId,
  deleteRecognizeRecord,
} from "../../api/plant.js";
import { globalParams } from "../../../public/config.js";
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["userInfo", "isPublished"]),
    isShowAdd() {
      if (this.pageType === "community") {
        return true;
      } else if (this.pageType === "knowledge") {
        if (this.userInfo.userType === 0 || this.userInfo.userType === 1) {
          return true;
        } else {
          return false;
        }
      }
    },
  },
  watch: {
    isPublished(newVal, oldVal) {
      console.log("isPublished has changed", newVal, oldVal);
      this.fabClick();
      if (this.pageType === "community") {
        this._getAllPosts();
      } else if (this.pageType === "knowledge") {
        this._getKnowledgePlants();
      }
    },
  },
  components: {
    InfoCard,
    NavBar,
  },
  data() {
    return {
      title: "",
      pageType: "",
      pattern: {
        color: "#7A7E83",
        backgroundColor: "#fff",
        selectedColor: "#409eff",
        buttonColor: "#409eff",
        iconColor: "#fff",
      },
      content: [
        {
          iconPath: "/static/icon/publish.png",
          selectedIconPath: "/static/icon/publish_selected.png",
          text: "发布",
          active: false,
        },
      ],
      listData: [],
      isPopular: false,
    };
  },
  onLoad(options) {
    console.log("detail page load", options);
    this.pageType = options.type;
    this.title = options.title;

    switch (this.pageType) {
      case "knowledge":
        this._getKnowledgePlants();
        this.isPopular = true;
        break;
      case "community":
        this._getAllPosts();
        this.isPopular = false;
        break;
      case "record":
        this._getRecognitionRecords();
        this.isPopular = true;
        break;
      default:
        break;
    }
  },
  created() {},
  methods: {
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    // 跳转到详情页
    toDetail(id) {
      console.log("跳转到详情页");
      if (this.pageType === "record") {
        return;
      }
      uni.navigateTo({
        url: "/pages/detail/detail?type=" + this.pageType + "&id=" + id,
      });
    },
    // 点击悬浮按钮
    fabClick() {
      console.log("悬浮按钮点击");
    },
    // 点击菜单
    trigger(e) {
      console.log("菜单选中", e);
      uni.navigateTo({ url: "/pages/publish/publish?type=" + this.pageType });
    },
    // 删除
    async toDelete(id) {
      console.log("删除，当前选择的id", id);
      let deleteRes = null;
      if (this.pageType === "community") {
        let { data: res } = await deletePost({ id: id });
        deleteRes = res;
        console.log("删除帖子", res);
      } else if (this.pageType === "knowledge") {
        let { data: res } = await deleteKnowledgePlant(id);
        deleteRes = res;
        console.log("删除植物", res);
      } else if (this.pageType === "record") {
        let { data: res } = await deleteRecognizeRecord(id);
        deleteRes = res;
        console.log("删除记录", res);
      }
      if (deleteRes.code === 200 && deleteRes.data) {
        if (this.isPopular === true && this.pageType === "knowledge") {
          this._getKnowledgePlants();
        } else {
          if (this.pageType === "community") {
            this._getAllPosts();
          } else if (this.pageType === "record") {
            this._getRecognitionRecords();
          }
        }
        uni.showToast({
          title: "删除成功",
          icon: "none",
        });
      } else {
        uni.showToast({
          title: "删除失败",
          icon: "none",
        });
      }
    },
    // 点赞
    async likeItem(id) {
      let { data: res } = await likePost(id);
      console.log("点赞", res);
    },
    // 获取所有科普植物数据
    async _getKnowledgePlants() {
      const { data: res } = await getKnowledgePlants();
      console.log("获取所有植物数据", res);
      if (res.code === 200) {
        this.listData = res.data;
        this.listData = this.listData.map((item) => {
          item.imgUrl = globalParams.baseUrl + item.imgUrl;
          return item;
        });
        console.log("科普植物数据", this.listData);
      }
    },
    // 获取所有帖子数据
    async _getAllPosts() {
      const { data: res } = await getAllPosts();
      console.log("获取所有帖子数据", res);
      if (res.code === 200) {
        this.listData = res.data;
        this.listData = this.listData.map((item) => {
          item.imgUrl = globalParams.baseUrl + item.imgUrl;
          return item;
        });
        console.log("帖子数据", this.listData);
      }
    },
    // 获取当前用户识别记录

    async _getRecognitionRecords() {
      let { data: res } = await getRecognizeRecordsByUserId(this.userInfo.id);
      console.log("获取当前用户识别记录", res);
      if (res.code === 200) {
        this.listData = res.data;
        this.listData = this.listData.map((item) => {
          item.imgUrl = globalParams.baseUrl + item.imgUrl;
          return item;
        });
        console.log("识别记录", this.listData);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.community {
  padding: 16px;
}

::v-deep .uni-fab {
  box-shadow: 0 !important;
}

::v-deep .uni-fab__content--other-platform {
  box-shadow: 0 !important;
}

.empty {
  margin: 16px;
  color: #999;
  text-align: center;
  font-size: 12px;
}
</style>
